<template>
  <div class="forget">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <van-nav-bar :border="false" left-arrow @click-left="onforgetClick" />
    <div class="container">
      <!------------------------------------------------------forget导航------------------------------------------------------------------>
      <van-tabs v-model="forgetTabs" class="forgetNav" animated>
        <van-tab title="忘记密码" class="forgetBox">
          <van-cell-group>
            <van-field
              v-model="setPhone"
              clearable
              type="tel"
              placeholder="请输入手机号"
              :error-message="setPhoneError"
            />
            <van-field
              v-model="setSms"
              center
              clearable
              placeholder="请输入短信验证码"
              :error-message="setSmsError"
            >
              <van-button
                slot="button"
                size="small"
                type="info"
                @click="setSmeBtn"
                :loading="SmsLoading"
                plain
                hairline
                loading-type="spinner"
                :loading-text="SmsLoadingText"
              >发送验证码</van-button>
            </van-field>

            <van-field
              v-model="setOnePassword"
              type="password"
              placeholder="请输入密码"
              clearable
              :error-message="setOnePasswordError"
              mask="true"
            />
            <van-field
              v-model="setTwoPassword"
              type="password"
              placeholder="请重复输入密码"
              clearable
              :error-message="setTwoPasswordError"
              mask="true"
            />

          </van-cell-group>
          <!-- forgetBtnButton -->
          <van-button
            type="info"
            size="large"
            @click="forgetBtn"
            id="Btn_click"
            :loading="forgetLoading"
            loading-type="spinner"
            loading-text="加载中..."
          >提  交</van-button>
        </van-tab>
        <van-tab title disabled></van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
/* ... */
import { forgetPassword } from '@/api/api'

export default {
  name: 'forget',

  mixins: [],

  components: {},

  props: {},

  data () {
    return {
      forgetTabs: 0,
      // 注册数据
      setPhone: '', // 设置手机号
      setSms: '', // 填写验证码
      setOnePassword: '', // 第一次填写密码
      setTwoPassword: '', // 第二次填写密码
      setPhoneError: '', // 手机号错误提示
      setSmsError: '', // 短信错误提示
      setOnePasswordError: '', // 第一次密码提示
      setTwoPasswordError: '', // 第一次密码提示
      smsTime: 30, // 获取短信倒计时
      SmsLoadingText: '', // loading倒计时
      SmsLoading: false, // 短信获取按钮状态
      forgetLoading: false
    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  destroyed () {},

  methods: {
    onforgetClick () {
      this.$router.back()
    },
    PostData () {
      let postData = { phone: this.setPhone, newPassword: this.setTwoPassword, code: this.setSms }
      forgetPassword(this.$qs.stringify(postData))
        .then(res => {
          if (res.data.code === 200) {
            this.$toast('修改成功,请登录!')
            this.$router.push('./login?tabs=0')
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取短信Btn
    setSmeBtn () {
      if (this.setPhone === '') {
        this.setPhoneError = '手机号不可为空'
      } else if (this.setPhone.length < 11) {
        this.setPhoneError = '手机号码小于11位数'
      } else {
        this.setPhoneError = ''
        this.SmsLoading = true
        // 在请求数据开始后执行倒计时
        this.$toast.success('成功发送短信')
        var authTimetimer = setInterval(() => {
          this.smsTime--
          this.SmsLoadingText = this.smsTime + '秒'
          if (this.smsTime <= 0) {
            // 取消当前任务
            clearInterval(authTimetimer)
            // 按钮可点击
            this.SmsLoading = false
            // 还原按钮文字
            this.SmsLoadingText = ''
            // 还原时间
            this.smsTime = 30
          }
        }, 1000)
      }
    },
    // 提交按钮
    forgetBtn () {
      if (this.setPhone === '') {
        this.setPhoneError = '手机号码不可为空'
      } else if (this.setPhone.length < 11) {
        this.setPhoneError = '手机号码小于11位数'
      } else if (this.setSms === '') {
        this.setPhoneError = ''
        this.setSmsError = '验证码不可为空'
      } else if (this.setOnePassword === '') {
        this.setSmsError = ''
        this.setPhoneError = ''
        this.setOnePasswordError = '密码不可为空'
      } else if (this.setTwoPassword === '') {
        this.setPhoneError = ''
        this.setOnePasswordError = ''
        this.setTwoPasswordError = '密码不可为空'
      } else if (this.setTwoPassword !== this.setOnePassword) {
        this.setTwoPasswordError = '密码输入不一致'
        this.$toast.fail('两次密码输入不一致')
      } else {
        this.setTwoPasswordError = ''
        this.forgetLoading = true
        // 将注册按钮设置为不可点击状态开始获取数据
        this.PostData()
      }
    }
  }
}
</script>

<style lang="less" >
/* ... */
.forgetNav {
  font-size: 26px;
  text-align: center;
  margin-top: 25px;
  color: #999999;
  ::after {
    border: none;
  }
  // 导航切换标签
  .van-tabs__wrap {
    .van-tabs__nav {
      .van-tabs__line {
        background-color: #d7b782;
      }
      .van-tab {
        font-size: 26px;
      }
      .van-tab--active {
        color: #d7b782;
      }
    }
  }
  //导航盒子
  .van-tabs__content {
    .van-tabs__track {
      .forgetBox,
      .forgetBox {
        padding-top: 65px;
      }
      .van-tab__pane-wrapper {
        .van-tab__pane {
          .van-cell-group {
            .forget_InBottom {
              margin-bottom: 10px;
            }
            .van-checkbox {
              padding: 20px 15px 0;
            }
          }
          #Btn_click {
            margin-top: 39px;
          }
          .forgetText {
            text-align: right;
            font-size: 12px;
            color: #d7b782;
          }
          .agreementTextBox {
            .agreementText {
              .van-checkbox__label {
                color: #999999;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
.container {
   margin: 0 15px;
}
</style>
